<template>
   <div class="goods-list-item" @click="goodslistClick">
    <img v-lazy="showImage" @load="imageLoad"/>
    <div class="goods-list-item-info">
      <p>{{goodsitem.title}}</p>
      <span class="price">￥{{goodsitem.price}}</span>
      <span class="collect">{{goodsitem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodlistitem',
  props: {
    goodsitem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    imageLoad() {
      this.$bus.$emit('imageLoad')
    },
    // 商品点击事件，要跳转到详情页
    goodslistClick() {
      let iid = this.goodsitem.iid
      this.$router.push({ path: '/detail', query: { iid }})
    }
  },
  computed: {
    showImage() {
      return this.goodsitem.image || this.goodsitem.img || this.goodsitem.show.img
    }
  },
}
</script>

<style lang="stylus" scoped>
.goods-list-item
  position relative
  width 48%
  padding-bottom 10px
  img
    width 100%
  .goods-list-item-info
    font-size 12px
    text-align center
    p
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      margin-bottom 3px
    .price
      color: #ff8198
      margin-right: 20px
    .collect
      position relative
      &:before
        position absolute
        content ""
        left -14px
        top 0
        width 14px
        height 14px
        background url('~assets/img/common/collect.svg') 0 0/14px 14px
        // background简写 分别是 背景图片地址 背景图像的位置/背景图像的尺寸
</style>